Vue Js Delete Multiple Rows Item Using Checkbox

In this Vue.js tutorial, we will learn how to implement a feature to delete multiple rows from a table using checkboxes. We’ll create a simple web application that allows users to select multiple rows in a table and delete them when clicking a “Delete Selected Rows” button.

How to Delete Multiple Rows Item Using Checkbox in Vue Js?

To start, let’s set up our Vue.js application. We’ll create a simple table with checkboxes for row selection. The HTML structure consists of a container div with a title, a “Delete Selected Rows” button, and a table. The table has a header row with column labels and a body section that displays data fetched from the Vue.js app’s data object.

<div id="app">
    <h3>Vue.js Delete Multiple Rows Data Using Checkbox</h3>
    <button class="delete-button" @click="handleDeleteRows">Delete Selected Rows</button>
    <table class="data-table">
      <thead>
        <tr>
          <th class="select-header">Select</th>
          <th class="id-header">ID</th>
          <th class="name-header">Name</th>
          <th class="email-header">Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in data" :key="row.id" class="data-row">
          <td>
            <input type="checkbox" :checked="selectedRows.includes(row.id)"
              @change="handleRowSelection(row.id, row.email)" />
          </td>
          <td class="id-cell">{{ row.id }}</td>
          <td class="name-cell">{{ row.name }}</td>
          <td class="email-cell">{{ row.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>

Implementing Efficient Multiple Row Deletion in Vue js

In the script section, we define our Vue.js application. We have two key data properties: selectedRows to keep track of the selected row IDs and data to store the table’s content. The data property initially holds a sample dataset.

To implement row selection, we use checkboxes in each row. When a user checks or unchecks a box, the handleRowSelection method is triggered, updating the selectedRows array and reflecting the changes in the data.

To delete the selected rows, the handleDeleteRows method is called. It filters the data array based on the selected row IDs, effectively removing the selected rows from the table. After deletion, the selectedRows array is reset.

Delete Multiple Rows in Vue js with Checkboxes

 <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          selectedRows: [],
          data: [
            { id: 4, name: "Alice Brown", email: "alice@example.com" },
            { id: 5, name: "David Wilson", email: "david@example.com" },
            { id: 6, name: "Sarah Davis", email: "sarah@example.com" },
            { id: 7, name: "Michael Clark", email: "michael@example.com" },
            { id: 8, name: "Linda Martinez", email: "linda@example.com" },
            { id: 9, name: "Robert Miller", email: "robert@example.com" },
            { id: 10, name: "Karen Anderson", email: "karen@example.com" }
          ]

        };
      },
      methods: {
        handleRowSelection(rowId, email) {
          if (this.selectedRows.includes(rowId)) {
            this.selectedRows = this.selectedRows.filter((id) => id !== rowId);
          } else {
            this.selectedRows.push(rowId);
          }

          this.data = this.data.map((row) => {
            if (row.id === rowId) {
              return { ...row, email };
            }
            return row;
          });
        },
        handleDeleteRows() {
          this.data = this.data.filter((row) => !this.selectedRows.includes(row.id));
          this.selectedRows = [];
        },
      },
    });
    app.mount("#app");
  </script>

Conclusion

This Vue.js application provides users with the capability to efficiently select and delete multiple rows from a table, making data management tasks more convenient. Vue.js simplifies the process of creating interactive and responsive web applications